<template>
	<view style="padding-bottom: 50rpx;">
		<up-form labelPosition="left" class="apply-form-field" :labelStyle="labelStyle" :borderBottom="true"
			ref="wuLiuRef" :model="wuLiu">
			<up-form-item :borderBottom="true" label-width="140" label="车牌号" required prop="carCard">
				<up-input v-model="wuLiu.carCard" placeholder="请输入车牌号" clearable>
					<template #suffix>
						<up-button text="选择车牌" type="primary" size="mini" @click.native='driverShowClick'></up-button>
					</template>
				</up-input>
			</up-form-item>
			<up-form-item :borderBottom="true" label-width="140" label="承运司机" required prop="carryDriver">
				<up-input v-model="wuLiu.carryDriver" placeholder="请输入承运司机" clearable></up-input>
			</up-form-item>
			<up-form-item :borderBottom="true" label-width="140" label="手机号" required prop="phone">
				<up-input v-model="wuLiu.phone" placeholder="请输入手机号" clearable></up-input>
			</up-form-item>
			<!-- #ifdef APP-->
			<up-form-item :borderBottom="true" label-width="140" label="车型" required prop="carModel"
				@tap="carModelClick()">
				<up-input v-model="wuLiu.carModel" placeholder="请选择车型" readonly></up-input>
			</up-form-item>
			<!-- #endif -->
			<!-- #ifdef H5-->
			<up-form-item :borderBottom="true" label-width="140" label="车型" required prop="carModel">
				<up-input v-model="wuLiu.carModel" placeholder="请选择车型" @click.native='carTypeShow=true' @focus='blur'
					clearable></up-input>
			</up-form-item>
			<!-- #endif -->
			<up-form-item :borderBottom="true" label-width="140" label="车辆内径(长)" required prop="size1">
				<up-input v-model="wuLiu.size1" placeholder="请输入车辆内径(长)" type="number" clearable></up-input>
			</up-form-item>
			<up-form-item :borderBottom="true" label-width="140" label="车辆内径(宽)" required prop="size2">
				<up-input v-model="wuLiu.size2" placeholder="请输入车辆内径(宽)" type="number" clearable></up-input>
			</up-form-item>
			<up-form-item :borderBottom="true" label-width="140" label="车辆内径(高)" required prop="size3">
				<up-input v-model="wuLiu.size3" placeholder="请输入车辆内径(高)" type="number" clearable></up-input>
			</up-form-item>
			<!-- #ifdef APP-->
			<up-form-item :borderBottom="true" label-width="140" label="物流供应商" required prop="logisticsProvider"
				@tap="logisticsProviderClick()">
				<up-input v-model="wuLiu.logisticsProvider" placeholder="请选择物流供应商" readonly></up-input>
			</up-form-item>
			<up-form-item :borderBottom="true" label-width="140" label="预计到园区时间" required @tap="driverDateClick()"
				prop="arrivalTime">
				<up-input v-model="wuLiu.arrivalTime" placeholder="请选择时间" readonly></up-input>
			</up-form-item>
			<!-- #endif -->
			<!-- #ifdef H5-->
			<up-form-item :borderBottom="true" label-width="140" label="物流供应商" required prop="logisticsProvider">
				<up-input v-model="wuLiu.logisticsProvider" placeholder="请选择物流供应商" clearable
					@click.native="logisticsProviderShow=true" @focus='blur'></up-input>
			</up-form-item>
			<up-form-item :borderBottom="true" label-width="140" label="预计到园区时间" required prop="arrivalTime">
				<up-input v-model="wuLiu.arrivalTime" placeholder="请选择时间"
					@click.native="driverDateShow=true" @focus='blur'></up-input>
			</up-form-item>
			<!-- #endif -->
			<up-form-item :borderBottom="true" label-width="140" label="费用总和" required prop="cost">
				<up-input v-model="wuLiu.cost" placeholder="下方费用总和、自动计算" type="number" readonly></up-input>
			</up-form-item>
			<up-form-item :borderBottom="true" label-width="140" label="物流费" required prop="logisticsCost">
				<up-input v-model="wuLiu.logisticsCost" @update:modelValue="sumCost(wuLiu)" placeholder="请输入物流费(元)"
					type="number" clearable></up-input>
			</up-form-item>
			<up-form-item :borderBottom="true" label-width="140" label="押车费" required prop="escortCost">
				<up-input v-model="wuLiu.escortCost" @update:modelValue="sumCost(wuLiu)" placeholder="请输入押车费(元)"
					type="number" clearable></up-input>
			</up-form-item>
			<up-form-item :borderBottom="true" label-width="140" label="过路费" required prop="passCost">
				<up-input v-model="wuLiu.passCost" @update:modelValue="sumCost(wuLiu)" placeholder="请输入过路费(元)" clearable
					type="number"></up-input>
			</up-form-item>
			<up-form-item :borderBottom="true" label-width="140" label="误车费" required prop="missCost">
				<up-input v-model="wuLiu.missCost" @update:modelValue="sumCost(wuLiu)" placeholder="请输入误车费(元)" clearable
					type="number"></up-input>
			</up-form-item>
			<up-form-item :borderBottom="true" label-width="140" label="其他费用" required prop="otherCost">
				<up-input v-model="wuLiu.otherCost" @update:modelValue="sumCost(wuLiu)" placeholder="请输入其他费用(元)"
					type="number" clearable></up-input>
			</up-form-item>
		</up-form>
		<view style="margin-top: 50rpx;padding: 0rpx 30% 0rpx 30%;">
			<up-button type="primary" color="green" shape="circle" text="物流保存" @click="wuLiuSave" :loading="loading"></up-button>
		</view>
		<lzcPicker ref="lzcPicker" @change="driverConfirm" :pickerList="carryList" pickerTittle='点击车牌即可,若无车牌,请手动填写' />
		<u-datetime-picker :show="driverDateShow" v-model="arrivalTime" mode="datetime" closeOnClickOverlay
			@confirm="arrivalTimeConfirm" @cancel="driverDateShow =false"
			@close="driverDateShow =false"></u-datetime-picker>
		<u-picker :show="carTypeShow" :columns="carTypeColumns" keyName="name" @confirm="carTypeConfirm"
			@close="carTypeClose" @cancel="carTypeClose" closeOnClickOverlay></u-picker>
		<u-picker :show="logisticsProviderShow" :columns="logisticsProviderColumns" keyName="name"
			@confirm="logisticsProviderConfirm" @close="logisticsProviderClose" @cancel="logisticsProviderClose"
			closeOnClickOverlay></u-picker>
			
		<!-- 消息提示	 -->
		<u-toast ref="uToast" />	
	</view>
</template>

<script>
	import lzcPicker from '@/components/driver-picker/lzc-picker.vue';
	import wuliuApi from '@/apis/gyl/wuliu.js';
	export default {
		components: {
			lzcPicker,
		},
		props: {
			data: {
				type: String,
				default: null
			}
		},
		data() {
			return {
				loading: false,
				carTypeShow: false,
				carTypeColumns: [
					[{
							id: 1,
							name: "4.2米冷藏车"
						},
						{
							id: 2,
							name: "6.8米冷藏车"
						},
						{
							id: 3,
							name: "7.7米冷藏车"
						},
						{
							id: 4,
							name: "9.6米冷藏车"
						},
						{
							id: 5,
							name: "13.7米冷藏车"
						},
						{
							id: 6,
							name: "4.2米厢式车"
						},
						{
							id: 7,
							name: "6.8米厢式车"
						},
						{
							id: 8,
							name: "9.6米厢式车"
						},
						{
							id: 9,
							name: "13米厢式车"
						},
						{
							id: 10,
							name: "4.2米高栏车"
						},
						{
							id: 11,
							name: "6.8米高栏车"
						},
						{
							id: 12,
							name: "9.6米高栏车"
						},
						{
							id: 13,
							name: "13米高栏车"
						},
						{
							id: 14,
							name: "2.7米面包车"
						},
						{
							id: 15,
							name: "3.8米依维柯"
						},
					]
				],
				logisticsProviderShow: false,
				logisticsProviderColumns: [
					[{
							id: 1,
							name: "安鹿臣(上海)供应链管理有限公司"
						},
						{
							id: 2,
							name: "宿迁市陆港物流有限公司"
						},
						{
							id: 3,
							name: "绿港供应链物流部"
						},
						{
							id: 4,
							name: "上海瑞启盛物流有限公司"
						},
						{
							id: 5,
							name: "山东佳怡供应链管理有限公司"
						},
						{
							id: 6,
							name: "宿迁市飞达物流有限公司"
						},
						{
							id: 7,
							name: "山东高德物流发展有限公司"
						}
					]
				],
				labelStyle: {
					color: '#aaa',
					fontSize: '30rpx'
				},
				wuLiu: {
					carryDriver: null,
					carCard: null,
					phone: null,
					carModel: null,
					insideDiameter: null,
					logisticsProvider: null,
					cost: null,
					arrivalTime: null,
					size1: null,
					size2: null,
					size3: null,
					logisticsCost: null,
					escortCost: null,
					passCost: null,
					missCost: null,
					otherCost: null
				},
				id: null,
				driverDateShow: false,
				carryList: [],
				sourceCarryList: [],
				arrivalTime: Number(new Date()),
				driverRules: {
					carCard: [{
						required: true,
						message: '请填写/选择车牌号',
						trigger: ['blur', 'change']
					}],
					carryDriver: [{
						required: true,
						message: '请填写承运司机',
						trigger: ['blur', 'change']
					}],
					phone: [{
						required: true,
						message: '请填写手机号',
						trigger: ['blur', 'change']
					}],
					arrivalTime: [{
						required: true,
						message: '请选择预计到园区时间',
						trigger: ['blur', 'change']
					}],
					carModel: [{
						required: true,
						trigger: ['blur', 'change'],
						message: "请选择车型"
					}, ],
					insideDiameter: [{
						required: true,
						trigger: ['blur', 'change'],
						message: "请输入车辆内径"
					}, ],
					logisticsProvider: [{
						required: true,
						trigger: ['blur', 'change'],
						message: "请选择物流供应商"
					}, ],
					cost: [{
						required: true,
						trigger: ['blur', 'change'],
						message: "请输入物流费用"
					}, ],
					size1: [{
						required: true,
						trigger: ['blur', 'change'],
						message: "请输入长"
					}, ],
					size2: [{
						required: true,
						trigger: ['blur', 'change'],
						message: "请输入宽"
					}, ],
					size3: [{
						required: true,
						trigger: ['blur', 'change'],
						message: "请输入高"
					}, ],
					logisticsCost: [{
						required: true,
						trigger: ['blur', 'change'],
						message: "请输入物流费"
					}, ],
					escortCost: [{
						required: true,
						trigger: ['blur', 'change'],
						message: "请输入押车费"
					}, ],
					passCost: [{
						required: true,
						trigger: ['blur', 'change'],
						message: "请输入过路费"
					}, ],
					missCost: [{
						required: true,
						trigger: ['blur', 'change'],
						message: "请输入误车费"
					}, ],
					otherCost: [{
						required: true,
						trigger: ['blur', 'change'],
						message: "请输入其它费用"
					}, ],
				}
			}
		},
		methods: {
			/**
			 * 禁止弹出
			 */
			async blur() {
				await uni.hideKeyboard();
			},
			
			/**
			 * app 调用
			 */
			driverDateClick() {
				this.driverDateShow = true;
			},
			carModelClick() {
				this.carTypeShow = true;
				this.$refs.wuLiuRef.validateField('carModel');
			},
			logisticsProviderClick() {
				this.logisticsProviderShow = true;
				this.$refs.wuLiuRef.validateField('logisticsProvider');
			},
			driverShowClick() {
				this.$refs.lzcPicker.handleShow();
			},
			driverConfirm(index) {
				const data = this.sourceCarryList[index];
				this.wuLiu.carCard = data.carCard;
				this.wuLiu.carryDriver = data.carryDriver;
				this.wuLiu.phone = data.phone;
			},
			/**
			 * 预计到园区时间
			 */
			arrivalTimeConfirm() {
				const timeFormat = uni.$u.timeFormat;
				this.wuLiu.arrivalTime = timeFormat(this.arrivalTime, 'yyyy-mm-dd hh:MM')
				this.driverDateShow = false;
			},
			carTypeConfirm(e) {
				this.wuLiu.carModel = e.value[0].name; //获取选择的数据
				this.carTypeShow = false;
				this.$refs.wuLiuRef.validateField('carModel');
			},
			carTypeClose() {
				this.carTypeShow = false;
			},
			logisticsProviderConfirm(e) {
				this.wuLiu.logisticsProvider = e.value[0].name; //获取选择的数据
				this.logisticsProviderShow = false;
				this.$refs.wuLiuRef.validateField('logisticsProvider');
			},
			logisticsProviderClose() {
				this.logisticsProviderShow = false;
			},
			//计算总费用
			sumCost(data) {
				let total = 0;
				if (data.logisticsCost != undefined && data.logisticsCost != '') {
					total += Number(data.logisticsCost);
				}
				if (data.escortCost != undefined && data.escortCost != '') {
					total += Number(data.escortCost);
				}
				if (data.passCost != undefined && data.passCost != '') {
					total += Number(data.passCost);
				}
				if (data.missCost != undefined && data.missCost != '') {
					total += Number(data.missCost);
				}
				if (data.otherCost != undefined && data.otherCost != '') {
					total += Number(data.otherCost);
				}
				this.wuLiu.cost = total.toString();
				this.$refs.wuLiuRef.validateField('cost');
			},

			// --------------------------------------------------------------------------------api------------------------------------------------------------------------
			async wuLiuSave() {
				var flag = false;
				await this.$refs.wuLiuRef.validate().then(res => {
					flag = true;
				}).catch(errors => {
					uni.$u.toast(errors[0].message)
				})
				if (flag) {
					this.loading = true;
					this.wuLiu.insideDiameter = this.wuLiu.size1 + '*' + this.wuLiu.size2 + '*' + this.wuLiu.size3;
					const res = await wuliuApi.saveLogistic({
						data: this.wuLiu,
						saleId: this.id
					});
					if (res.success) {
						this.$refs.uToast.show({
							type: 'success',
							message: '物流分配成功',
							duration: 1500, // 设置适当的持续时间
							complete: () => {
                               uni.navigateBack()
							}
						});
					} else {
						this.loading = false;
						uni.showToast({
							icon: 'none',
							duration: 3000,
							title: '物流分配失败'
						});
					}
				}
			},
			async getCarryList() {
				const res = await wuliuApi.selectAll();
				if (res.success) {
					this.sourceCarryList = res.data;
					const carCardList = res.data.map((item, index) => ({
						carCard: item.carCard,
						index: index
					}));
					this.carryList = carCardList;
				}
			},
			/**
			 * 获取物流数据
			 */
			async getWUliu() {
				const res = await wuliuApi.getLogisic(this.id);
				if (res.success) {
					if (res.data) {
						this.wuLiu = res.data;
						var sizeArr = res.data.insideDiameter.split("*");
						this.wuLiu.size1 = sizeArr[0];
						this.wuLiu.size2 = sizeArr[1];
						this.wuLiu.size3 = sizeArr[2];
					} else {
						this.wuLiu = {};
					}

				}
			},
		},

		mounted() {
			this.id = this.data;
			this.$refs.wuLiuRef.setRules(this.driverRules);
			this.getCarryList();
			this.getWUliu();
		}
	}
</script>

<style>

</style>